<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<style>
    #searchOptionTb{display: none;}
</style>
<table id="searchgrid" class="topjui-datagrid"></table>

<div id="searchOptionTb">
    <form id="option_form">
        <input id="searchOptionbox" name="plateno" class="selectp" autocomplete="off" placeholder="请输入车牌号查询"  style="width:180px;height: 24px;">
    </form>
</div>
<form id="customerform" method="post" style="padding-top:1px">
    <input type="hidden" name="id" id="id">
    <table style="margin:6px; width: 98%">
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">用车日期</td>
            <td>
                <input type="text" id="form-usedate" name="usedate" class="selectp"  style="width:250px;height: 24px">
            </td>
            <td class="label" width="126px" style="text-align: right">车辆牌号</td>
            <td>
                <input type="hidden" id="form-carid" name="carid" value="0">
                <input type="text" id="form-plateno"  name="plateno"  readonly="readonly" class="selectp" style="width:250px;height: 24px">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">出发地</td>
            <td>
                <input type="text" name="srcaddress" class="selectp" autocomplete="off" style="width:250px;height: 24px">
            </td>
            <td class="label"  width="126px" style="text-align: right">目的地</td>
            <td>
                <input type="text" name="taraddress" class="selectp" autocomplete="off"  style="width:250px;height: 24px">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">使用人员</td>
            <td>
                <input type="text" name="whouse" autocomplete="off" class="selectp" style="width:250px;height: 24px">
            </td>
            <td class="label" width="126px" style="text-align: right">随行人员</td>
            <td>
                <input type="text" name="offices" autocomplete="off" class="selectp" style="width:250px;height: 24px">
            </td>
        </tr>
        <tr style="height: 30px">
            <td class="label" width="126px" style="text-align: right">事由</td>
            <td>
                <input type="text" name="display" autocomplete="off" class="selectp" style="width:250px;height: 24px">
            </td>
            <td class="label" width="126px" style="text-align: right">仪表</td>
            <td>
                <input type="hidden" id="dashstart" name="dashstart">
                <input type="text" name="dashend" autocomplete="off" class="selectp" style="width:250px;height: 24px">
            </td>
        </tr>
    </table>
</form>
<script type="text/javascript" charset="utf-8" th:inline="none">
    var searchgrid;
    $(function(){
        searchgrid = $('#searchgrid').datagrid({
            url:"/cars/list",
            method:'get',
            fit : false,
            fitColumns : true,
            border : false,
            pagination : true,
            idField : 'id',
            pageSize : 10,
            pageList : [ 10,20 ],
            sortName : 'id',
            sortOrder : 'desc',
            singleSelect: true,
            checkOnSelect : true,
            selectOnCheck : true,
            nowrap : false,
            columns:[[
                {
                    field:'id',
                    title:'编号',
                    width:50,
                    checkbox : true
                }, {
                    field:'carno',
                    title:'车辆编号',
                    width:60
                }, {
                    field:'plateno',
                    title:'车辆牌照',
                    width:60
                }, {
                    field:'fleetname',
                    title:'所属车队',
                    width:60
                }, {
                    field:'cartype',
                    title:'车辆类型',
                    width:60
                }, {
                    field:'carown',
                    title:'车辆归属',
                    width:60
                }, {
                    field:'runtotal',
                    title:'总公里数',
                    width:60
                }, {
                    field:'safetime',
                    title:'保险日期',
                    width:60
                }, {
                    field:'stoptime',
                    title:'年检日期',
                    width:60
                }, {
                    field:'limitspeed',
                    title:'车辆限速',
                    width:60
                }
            ]],
            toolbar:[{
                text:document.getElementById('searchOptionTb').innerHTML
            },{
                text:'查询',
                iconCls : 'fa fa-search',
                height: '24px',
                handler : function() {
                    search_search();
                }
            }],
            onClickRow :function(rowIndex,rowData){
                search_editFun(rowData.id);
            }
        });

    });

    function search_editFun(id) {
        var index = searchgrid.datagrid('getRowIndex', id);
        var rows = searchgrid.datagrid('getRows');
        var o = rows[index];
        //$('#customerform').form('load', o);
        $('#form-carid').val(id);
        $('#form-plateno').val(o.plateno);
        //日期初始化
        $('#form-usedate').datebox({
            formatter: function (date) {

                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                return y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d);

            }
        });
        $(".combo-text").removeAttr("style");
        $(".combo-text").attr("style", "width:250px;height:24px;line-height:24px");
        $(".combo-text").addClass("selectp");
        $(".combo-arrow").attr("style", "margin-left: -20px;margin-top: 4px;background-color:rgba(0,0,0,0)");
        $(".combo-panel").attr("style", "margin-top:10px;");

    }

    function search_search(){
        var param = form2Json("option_form");
        $('#option_form').form('submit', {
            url : '/cars/list',
            onSubmit:function(){
                return true;
            },
            success : function(result) {
                try {
                    var r = $.parseJSON(result);
                    searchgrid.datagrid({
                        url:'/cars/list',
                        pagination : true,
                        idField : 'id',
                        pageSize : 10,
                        pageList : [ 10,20 ],
                        sortName : 'id',
                        sortOrder : 'desc',
                        queryParams: param,　　//关键之处
                        data:r
                    });

                } catch (e) {
                    $.messager.alert('提示', result);
                }
            }
        });
    }
</script>
</html>